<template>
	<view class="addEditForm">
		<view class="data-form bgfff">
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">标题</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.title"
						:placeholder="optionDisabled?'-':'请输入标题'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30">备注</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.remark"
						:placeholder="optionDisabled?'-':'请输入备注'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">录入物品</text>
				<view class="data-form-input gui-flex gui-justify-content-end">
					<button type="default" class="gui-button gui-bg-blue gui-noborder" @click="jumpGoods"
						style="width: 180rpx;height: 60rpx;line-height: 60rpx;padding: 0;font-size: 24rpx;">
						<text class="gui-color-white gui-button-text" style="line-height: 60rpx;">商品录入</text>
					</button>
				</view>
			</view>
			<scroll-view scroll-x="true">
				<view class="gui-table gui-border-l gui-border-t" style="margin-top:50rpx;width: 1000rpx;">
					<view class="gui-theader gui-flex gui-rows gui-nowrap gui-bg-gray">
						<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">物品名称</text>
						<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">数量</text>
						<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">单位</text>
						<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">生产日期</text>
						<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">过期日期</text>
						<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">食品类型</text>
						<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">子类型</text>
						<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">是否进口</text>
						<text class="gui-td gui-border-r gui-border-b gui-td-text gui-bold gui-text-center">操作</text>
					</view>
					<view class="gui-tbody gui-flex gui-rows gui-nowrap" v-for="(item, index) in goodsList"
						:key="index">
						<text class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{item.name}}</text>
						<text
							class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{item.quantity}}</text>
						<text class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{item.unit}}</text>
						<text
							class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{item.produceTime}}</text>
						<text
							class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{item.expireTime}}</text>
						<text
							class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{item.fTypeName}}</text>
						<text
							class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{item.fTypeSubName}}</text>
						<text
							class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b">{{(item.whetherImport == 0) ? '否' : '是'}}</text>
						<text class="gui-td gui-td-text gui-text-center gui-border-r gui-border-b"
							style="color: #dc362e;" @click="delGoods(item, index)">删除</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="right-area-footer2 flex-ac bgfff" v-if="!optionDisabled">
			<view class="saveBtn cancleBtn" @tap="handleCancle">取消</view>
			<view class="saveBtn" @tap="handleSubmit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				did: '',
				dataForm: { //表单
					id: '',
					title: '',
					remark: '',
					params: {
						products: []
					}
				},
				goodsList: [],
				foodTypeList: [{
						name: '食品',
						val: 'Food'
					},
					{
						name: '食用农产品',
						val: 'FoodFarm'
					},
					{
						name: '食品添加剂',
						val: 'FoodAdd'
					},
					{
						name: '食品相关',
						val: 'FoodRelate'
					}
				],
				cpddDateRangeVal: '',
				cpddDateRangeVal2: '',
				selectList: [], //上一页带过来，如果上一页用不到，可以在这里调用赋值
				optionDisabled: false,
			}
		},
		onLoad(options) {
			console.log('options', options);
			this.did = options.id || ''
			this.optionDisabled = options.op == 'look' ? true : false
			let title = options.op == 'look' ? '详情' : options.op == 'add' ? '新增' : '编辑'
			uni.setNavigationBarTitle({
				title
			})
			if (options.op != 'add') {
				this.loadDetail();
			}
			uni.$on('selectKcgl', (data) => {
				console.log(data);
				let checkLen = this.goodsList.filter(e => e.id == data.id)
				if (checkLen.length > 0) {
					console.log("=======重复");
					return;
				} else {
					let fTypeName = this.foodTypeList.filter(item => item.val == data.fType)
					let fTypeSubName = data.params.fTypeSubName;
					let {
						id,
						name,
						quantity,
						unit,
						produceTime,
						expireTime,
						fType,
						fTypeSub,
						whetherImport
					} = data;
					this.goodsList.push({
						stockId: data.id,
						fTypeName: fTypeName[0].name,
						name,
						quantity,
						unit,
						produceTime,
						expireTime,
						fType,
						fTypeSub,
						fTypeSubName,
						whetherImport
					});
				}
				this.$forceUpdate()
			})
		},
		onUnload() {
			uni.$off('selectKcgl')
		},
		methods: {
			loadDetail() {
				this.$http.get(`/material/warehouseOut/${this.did}`).then(res => {
					if (res.code == 200) {
						Object.keys(this.dataForm).forEach(key => this.dataForm[key] = res.data[key])
						this.goodsList = res.data.params.products;
					}
				})
			},
			jumpGoods() {
				this.$u.to(`/pages/ylgl/rkd-warp/kcIndex?type=select`)
			},
			delGoods(item, index) {
				if(item.stockId) {// 编辑需要调用接口
					this.$http.delete(`/material/warehouseOutProduct/${item.id}`).then(res => {
						if (res.code == 200) {
							this.goodsList.splice(index, 1)
						}
					})
				}else {
					this.goodsList.splice(index, 1)
				}
			},
			handleCancle() {
				this.$u.back()
			},
			handleSubmit() {
				if (!this.dataForm.title) return this.$u.msg('请输入标题')
				if (this.goodsList.length <= 0) return this.$u.msg('请录入物品')
				this.realSumbit();
			},
			realSumbit() {
				this.dataForm.params.products = this.goodsList;
				console.log(this.dataForm.params);
				if (this.dataForm.id) {
					this.$http.put('/material/warehouseOut', this.dataForm).then(res => {
						if (res.code == 200) {
							uni.$emit('reFlashList')
							this.$u.msg('修改成功')
							this.$u.back(1, 1000)
						}
					})
				} else {
					this.$http.post('/material/warehouseOut', this.dataForm).then(res => {
						if (res.code == 200) {
							uni.$emit('reFlashList')
							this.$u.msg('已新增')
							this.$u.back(1, 1000)
						}
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	/* 普通表格 */
	.gui-td {
		width: 100rpx;
		flex: 1;
		overflow: hidden;
		padding: 20rpx 10rpx;
		display: flexbox;
	}

	.gui-td-text {
		line-height: 60rpx !important;
		font-size: 24rpx;
	}
</style>